<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts前端Vuejs整合</title>
</head>
<body>
{# div 把含vue代码的包含进来 #}
<div id="app">
    <h1>Flask Vue ECharts 图表 </h1>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1200px;height:800px;"></div>

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
{# vue-resource使用用来调接口的  this.$http.get("/api/books").then(rsp => { }  引入get方法  #}
<script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            datas: [],
        },
        delimiters: ["[[", "]]"],
        mounted: function () {
            this.fetchData();
        },
        methods: {
            fetchData() {
                this.$http.get("/app/get_datas/").then(rsp => {
                    this.datas = rsp.body
                    // console.log(this.datas.series2)
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption({
                        title: {text: '2019年医保执行情况-在Vue中使用echarts'},
                        tooltip: {},
                        legend:{},
                        xAxis: {
                            data: this.datas.xaxis
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '药品费',
                                type: 'bar',//折线图 可以自定义bar柱状图
                                data: this.datas.series1
                            },
                            {
                                name: '总费用',
                                type: 'bar',//折线图 可以自定义bar柱状图
                                data: this.datas.series2
                            }
                        ]
                    });

                }, err => {
                    console.log('Error')
                });
            }
        }
    });
</script>
</body>
</html>